<!DOCTYPE xhtml> 
<html>
<head>
	<script type="text/javascript" src="jquery-1.5.1.min.js"> </script>
	<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>-->

	<script type="text/javascript" src="jquery.spinner.js"> </script>
	<script type="text/javascript">
	
		$(document).ready(function()
		{
			window.demos = 
			[
				"$('#here').spinner();",
				"$('#here').spinner({initialiser:'random'});",
				"$('#here').spinner({animator:'wipe', gridHeight:1});",
				"$('#here').spinner({tileWidth:8, tileHeight:26, gridWidth:25, gridHeight:1, animator:'wipe', maxOpacity: 0, minOpacity: 1, backgroundColour: '#eef', background: 'url(testBG.png) no-repeat 52 0', duration: 900});",
				"$('#here').spinner({initialiser:'random', background: 'url(testBG.png) no-repeat 8 0', tileHeight:9});",
				"$('#here').spinner({animator:'wipe', width:100, gridwidth:10, gridHeight:3, tileHeight:3, duration: 800, refreshRate: 40});",
				"$('#here').spinner({initialiser:'random', gridWidth:20});",
				"$('#here').spinner({gridWidth:20});",
				"$('#here').spinner({gridWidth:15, gridHeight:1, tileHeight:10});",
				"$('#here').spinner({initialiser:'random', gridWidth:4, gridHeight:4, tileWidth:5, tileHeight:5, refreshRate:50});",		
				"$('#here').spinner({gridWidth:1, gridHeight:10, tileHeight:2, refreshRate:20});",
				"$('#here').spinner({initialiser:'random', gridWidth:1, gridHeight:10, tileHeight:2, refreshRate:20});",
				"$('#here').spinner({gridWidth:1, gridHeight:10, tileHeight:2, refreshRate:100});",
				"$('#here').spinner({initialiser:'random', gridWidth:3, gridHeight:3, tileHeight:10});",
				"$('#here').spinner({gridWidth:15, gridHeight:1, tileHeight:10});",
				"$('#here').spinner({gridWidth:3, gridHeight:3, tileWidth:20, tileHeight:20});"				
			];
			eval(demos[0]);
			showExampleText(0);
		});
		
		var current = 0;
		
		function goDemo(vector)
		{
			current += vector;
			(current < 0) && (current = demos.length-1);
			$('#here').get(0).spinner.stop();
			$('#here').html('');
			eval(demos[current % demos.length]);
			showExampleText(current % demos.length);
		}
		
		function start()
		{
			$('#here').get(0).spinner.start();
		}
		
		function stop()
		{
			$('#here').get(0).spinner.stop();
		}
		
		function showExampleText(index)
		{
			$('#exampleText').html(demos[index].replace(/,/g, '<br/> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '));
		}
		
	</script>
</head>
<body style="font-family: sans">
	<a href="javascript:goDemo(-1)">previous</a> |
	<a href="javascript:goDemo(1)">next</a>
	<br/>
	<a href="javascript:start()">start</a> |
	<a href="javascript:stop()">stop</a>
	
	<div style="width: 250px; padding: 30px 0px 30px 0px;">
		<div id="here" style="padding:1px; border:1px solid #aae; width:auto; margin:auto;"></div>
	</div>
	<div id="exampleText" style="color:#555;"></div>
</body>
</html>

